<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :setting="setting"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->
  
    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting
          :field="field"
          @input="update"
        ></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->
    
    <!-- start 关联显示字段 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.form.preview.material.label2')}}</h4>
      <div class="form-item-box">
        <div class="form-setting-item">
          <el-select
            v-model="materialRelatedFields"
            value-key="fieldName"
            multiple
            :multiple-limit="5"
          >
            <el-option
              v-for="item in materialsAllFields"
              :key="item.fieldName"
              :label="item.displayName"
              :value="item"
              :disabled="checkFieldDisabledHandler(item)"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- end 物料关联显示字段 -->
  </div>
</template>
    
<script>
/* mixin */
import SettingMixin from '@src/component/form/mixin/setting';
import FormSubFormMixin from '@src/component/form/mixin/form.subForm';
/* props */
import { settingProps } from '@src/component/form/components/props';
/* util */
import { findComponentUpward } from '@src/util/assist';
import * as FormUtil from '@src/component/form/util';
import i18n from '@src/locales'
    
export default {
  name: 'FormSubMaterialsSetting',
  mixins: [SettingMixin, FormSubFormMixin],
  props: settingProps,
  data() {
    return {
      isMulti: this.field.setting?.isMulti || 0,
    };
  },
  computed: {
    /** 物料关联系统字段 */
    materialRelatedFields: {
      get() {
        return this.subformFields.filter(
          field => field.formType === 'materialRelatedFields'
        );
      },
      set(value) {
        let subFormFieldList = [...value];
        this.update(subFormFieldList, 'subFormFieldList');
      },
    },
    /* 物料表单字段 */
    materialsAllFields() {
      let { materialFiels } = findComponentUpward(this, 'form-design') || {};
    
      let fields = materialFiels.map(field => {
        return {
          ...field,
          id: null, // 去掉原字段id，由后端生成
          formType: 'materialRelatedFields', // 用统一的类型
          setting: {
            ...(field.setting || {}),
            originalFormType: field.formType, // 存储原本的类型
          },
          parentFieldId: this.field.fieldName || '',
          // isSystem: 1, // 为了区别自定义显示字段
          fieldName: field.fieldName, // 拼接fieldName防止重复
        };
      });
      return FormUtil.toFormField(fields);
    },
  },
  mounted() {
    this.materialRelatedFields = this.initProductRelatedFields();
  },
  methods: {
    /* 初始化物料关联显示字段 */
    initProductRelatedFields() {
      // 无值时设置默认值
      if (!this.materialRelatedFields.length) {
        let fields = this.materialsAllFields.filter(field =>
          this.checkFieldDisabledHandler(field)
        );
        return fields;
      }
    
      // 有值时需过滤掉已被删除的关联显示字段
      let materialRelatedFields = this.materialRelatedFields.filter(field =>
        this.materialsAllFields.some(option => option.fieldName == field.fieldName)
      );
    
      // 已删除的关联显示字段
      let removeFields = this.materialRelatedFields.filter(field =>
        this.materialsAllFields.every(
          option => option.fieldName != field.fieldName
        )
      );
    
      // 存在已删除的关联显示字段则提示
      if (removeFields.length) this.showNotification(removeFields);
    
      return materialRelatedFields;
    },
    
    /* 检查物料字段是否禁止取消 */
    checkFieldDisabledHandler(field) {
      // 默认选中物料名称、物料类型、物料编号且不可取消
      const fieldNameArr = ['name', 'type', 'sn'];
    
      let fieldName = field.fieldName;
    
      return fieldNameArr.indexOf(fieldName) > -1;
    },
    
    /** 关联字段变动提示 */
    showNotification(arr = []) {
      this.$notify({
        type: 'warning',
        title: this.$t('common.form.preview.material.label3'),
        duration: 0,
        message: (function (h) {
          let fieldNodes = arr.map((item, index) => {
            return (
              <strong>
                {item.displayName}
                {arr.length - 1 != index && '、'}
              </strong>
            );
          });
    
          return (
            <div class="form-design-notification">
              <p>{i18n.t('common.form.preview.material.tip1')}</p>
              <div class="form-design-notification-content">{fieldNodes}</div>
            </div>
          );
        })(this.$createElement),
      });
    },
  },
};
</script>
    <style lang="scss" scoped>
    @import '@src/component/form/components/FormSubForm/FormSubForm.scss';
    </style>
    